<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <!-- 引入 layui.css -->
  <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
  <!-- 引入 layui.js -->
  <script th:src="@{/layui/layui.js}"></script>
</head>
<style>
  .ws-editor{
    height: 100%;
    padding: 16px;
    border: none;
    border-radius: 3px;
    background-color: #3f3f3f;
    color: #f8f8f2;
    font-family: Courier New;
  }
  .layui-tab-content{
    padding: 15px;
  }
  .lahui-tab-btn{
    position: absolute;
    top: 10px;
    right: 32px;
    height: 30px;
    line-height: 30px;
  }
</style>
<script th:inline="javascript">

  var nginx_status= [[${system}]];
  var nginx= [[${nginx}]];

</script>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="code-input">
  <ul class="layui-tab-title">
    <li class="layui-this">配置文件</li>
    <li>启动命令</li>
    <li>停止命令</li>
    <li>重启命令</li>
  </ul>
  <button type="button" class="layui-btn layui-bg-blue lahui-tab-btn" id="tab-btn" onclick="saveCode()">保存</button>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="layui-form">
        <div class="layui-form-item">
          <textarea name="conf" placeholder="多行文本框" th:text="${conf}" class="layui-textarea ws-editor"></textarea>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-form">
        <div class="layui-form-item">
          <textarea name="start" th:disabled="${system eq 0}" th:classappend="${system == 0 ?'':'ws-editor'}" th:text="${start}" placeholder="多行文本框" class="layui-textarea"></textarea>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-form">
        <div class="layui-form-item">
          <textarea name="stop" th:disabled="${system eq 0}" th:classappend="${system == 0 ?'':'ws-editor'}" th:text="${stop}" placeholder="多行文本框" class="layui-textarea"></textarea>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-form">
        <div class="layui-form-item">
          <textarea name="restart" th:disabled="${system eq 0}" th:classappend="${system == 0 ?'':'ws-editor'}" th:text="${restart}" placeholder="多行文本框" class="layui-textarea"></textarea>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  var saveCode ;
  var tab_i = 0 ;
  layui.use(function(){
    var $ = layui.$;
    var element = layui.element;

    $('.ws-editor').css('height', (window.innerHeight - 110)+'px');


    // tab 切换事件
    element.on('tab(code-input)', function(data){
      tab_i = data.index;
      console.log(nginx_status)
      console.log(nginx)
      if (nginx_status === 0){
        if (tab_i > 0 && !$("#tab-btn").prop("disabled")){
          $("#tab-btn").addClass('layui-btn-disabled')
          $("#tab-btn").prop("disabled",true)
        }
        if (tab_i == 0 && $("#tab-btn").prop("disabled")){
          $("#tab-btn").removeClass('layui-btn-disabled')
          $("#tab-btn").prop("disabled",false)
        }
      }

    });

    saveCode = function (){
      let data ={}
      switch (tab_i) {
        case 0:
          data={
            id:nginx.id,
            type:0,
            value:$('textarea[name=conf]').val()
          }
          break;
        case 1:
          data={
            id:nginx.id,
            type:1,
            value:$('textarea[name=start]').val()
          }
          break;
        case 2:
          data={
            id:nginx.id,
            type:2,
            value:$('textarea[name=stop]').val()
          }
          break;
        case 3:
          data={
            id:nginx.id,
            type:3,
            value:$('textarea[name=restart]').val()
          }
          break;
      }
      post(data)
    }

    function post(data){
      var loadingId = layer.open({
        type: 3, // page 层类型
        shade: [0.5, '#FFF'], // 遮罩透明度
        icon: 2,
        anim: 0, // 0-6 的动画形式，-1 不开启
      });
      // 执行提交
      $.ajax({
        url: location.origin+'/service-web/api/savefile',
        type:'post',
        dataType: 'json',
        data: JSON.stringify(data),
        headers: {
          'Content-Type':'application/json'
        },
        success: function(res){
          layer.close(loadingId);
          if(res.code === 200){
            layer.msg('修改成功', {icon: 1,offset:'20px'});
          }else {
            layer.msg("修改失败", {icon: 2,offset:'20px'});
          }
        },
        error: function(res){
          console.log(res)
          layer.close(loadingId);
          layer.msg("请求错误", {icon: 2,offset:'20px'});
        }
      })
    }
  })
</script>
</html>